import React, { Component } from 'react';
import './App.css';
import { Provider } from 'react-redux';
import configureStore from './store';
import MainContainer from './containers/MainContainer';
import SideBarContainer from './containers/SideBarContainer';
import RightBarContainer from './containers/RightBarContainer';
import { readDatFile } from './node/node'; 
import './style/style.scss';
import 'antd/dist/antd.css';
const {ipcRenderer} = require('electron');

const store = configureStore();
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      plotChestData: [],
      plotHeadData: [],
      tagFilePath: '',
      sidePanelShow: true,
      filterPanelShow: true,
    }
  }

  componentDidMount() {
    ipcRenderer.on('sidePanelView', (event, status) => {
      this.setState({sidePanelShow: status})
    })
    ipcRenderer.on('tagFilterView', (event, status) => {
      this.setState({filterPanelShow: status});
    })
  }

  analysisData = (path) => {
    let dataObj;
    const jsonPath = path.slice(0, -3) + 'json';
    readDatFile(path).then((data) => {
      dataObj = data;
      this.setState({
        plotChestData: dataObj.chest,
        plotHeadData: dataObj.head,
        tagFilePath: jsonPath
      });
    }).catch((err) => {
      console.warn(err);
    });
  }

  render() {
    return (
      <Provider store={store}>
        <div style={{ 'height': '100%', 'display': 'flex' }}>
          {
            this.state.sidePanelShow ? (
              <SideBarContainer sidePanelShow={this.state.sidePanelShow} filterPanelShow={this.state.filterPanelShow} analysisData = {this.analysisData} />              
            ) : null
          }
          <MainContainer sidePanelShow={this.state.sidePanelShow} filterPanelShow={this.state.filterPanelShow} tagFilePath={this.state.tagFilePath} plotChestData={this.state.plotChestData} plotHeadData={this.state.plotHeadData}/>
          {
            this.state.filterPanelShow ? (
              <RightBarContainer sidePanelShow={this.state.sidePanelShow} filterPanelShow={this.state.filterPanelShow} />
            ) : null
          }
        </div>
      </Provider>
    );
  }
}

export default App;
